<template>
	<view class="real-name-page">
		
		<view class="mer-info" v-for="(item, index) in orderInfo.merchantAddress">
			<view class="name">{{item.name}} {{item.phone}}</view>
			<view class="address">收货地址：{{item.address}} {{item.detailed_address}}</view>
			
			<view class="copy-btn" @click="handleCopy(item)">
				复制商家收货地址信息
			</view>
			
		</view>
		
		<view class="section-box">
			<view class="set-form">
				<view class="item">
					<view class="label">物流单号</view>
					<input type="text" v-model="logistics_id" class="set" placeholder="请填写您寄回商品的包裹物流单号" />
				</view>
				<view class="item">
					<view class="label">物流公司</view>
					<input type="text" v-model="logistics_name" class="set" placeholder="请填写您寄回商品的包裹物流公司" />
				</view>
			</view>
		</view>
		<view class="fixed-one-btn" @click="next">
			<view class="f-btn">确定提交</view>
		</view>
	</view>
</template>

<script>
	import { getOrderDetail, refundExpress } from '@/api/order.js'
	export default {
		data() {
			return {
				logistics_id: '',
				logistics_name: '',
				order_id: '',
				orderInfo: {}
			}
		},
		onLoad(options) {
			if (options.order_id) {
				this.order_id = options.order_id
			}
			this.getOrderInfo();
		},
		methods: {
			getOrderInfo: async function() {
				let that = this;
				uni.showLoading({
					title: "正在加载中"
				});
				let obj = await getOrderDetail(this.order_id);
				console.log(obj)
				that.orderInfo = obj.data
				uni.hideLoading()
			},
			handleCopy(item) {
				my.setClipboard({
				  text: item.name + item.phone + item.address + item.detailed_address,
				});
				uni.showToast({
				  title: "复制成功",
				})
			},
			next() {
				if (this.logistics_id == "") {
				  uni.showToast({
				    title: "请填写您寄回商品的包裹物流单号",
				  });
				  return false;
				}
				
				if (this.logistics_name == "") {
				  uni.showToast({
				    title: "请填写您寄回商品的包裹物流公司",
				  });
				  return false;
				}
			}
		}
	}
</script>

<style lang="scss">
	page { background-color: #fff; }
	
	
	.mer-info {
		padding: 24rpx;
		
		.name {
			color: #1F1F1F;
			font-size: 32rpx;
			font-weight: 500;
		}
		
		.address {
			padding-top: 16rpx;
			font-size: 28rpx;
			color: #999999;
		}
		
		
		.copy-btn {
			margin-top: 24rpx;
			height: 76rpx;
			border-radius: 40rpx;
			border: 1px solid #39CCC2;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #39CCC2;
			font-weight: bold;
		}
	}
	
	.real-name-page {
		.section-box {
			padding: 24rpx;
			margin: 24rpx 0 0 0;
			background: #FFFFFF;
			border-radius: 24rpx;
			
			.s-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
			}
			
			.s-sub {
				margin-top: 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				
				text {
					color: #FF271F;
				}
			}
		}
	
		.set-form {
			border-top: 2rpx solid #F5F5F5;
			.note {
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				width: 100%;
				height: 64rpx;
				background: #FFF8EB;
				border-radius: 32rpx;
				
				image {
					width: 32rpx;
					height: 32rpx;
				}
				
				text {
					margin-left: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FF7029;
				}
			}
		
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 92rpx;
				
				&~.item {
					border-top: 2rpx solid #F5F5F5;
				}
				
				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
				}
				
				.set {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					text-align: right;
					border: none;
				}
			}
		}
	
		.demand-box {
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			
			.item {
				width: 150rpx;
				
				image {
					width: 150rpx;
					height: 128rpx;
				}
				
				.title {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 24rpx;
					text-align: center;
				}
			}
		}
	}
	
	.submit-btn {
		height: 96rpx;
		background: linear-gradient(90deg, #71EBDA 0%, #39CCC2 100%);
		border-radius: 48rpx;
		margin: 0 auto;
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.btn-text {
		color: #fff;
		font-size: 32rpx;
	}
	
	.top-info {
		height: 720rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #5ACCBD;
		color: #fff;
		border-bottom-right-radius: 30rpx;
		
		
		.avatar {
			width: 208rpx;
			height: 208rpx;
			margin-top: 224rpx;
			
			image {
				height: 100%;
				width: 100%;
			}
		}
		
		.text1 {
			font-size: 32rpx;
			margin-top: 24rpx;
		}
		
		.text2 {
			width: 590rpx;
			margin-top: 16rpx;
			margin-top: 24rpx;
		}
	}
	
	.m-wrapper {
		width: 100%;
		height: 30rpx;
		background: #5ACCBD;
		.m-item {
			width: 100%;
			height: 30rpx;
			background: #F5F7FA;
			border-top-left-radius: 30rpx;
		}
	}
</style>